<template>
  <ele-page>
    <login-record-search :where="defaultWhere" @search="reload" />
    <ele-card :body-style="{ paddingTop: '8px' }">
      <ele-pro-table
        ref="tableRef"
        row-key="id"
        :columns="columns"
        :datasource="datasource"
        :show-overflow-tooltip="true"
        :highlight-current-row="true"
        :export-config="{ fileName: '登录日志数据' }"
        :where="defaultWhere"
        cache-key="systemLoginRecordTable"
      >
        <template #toolbar>
          <el-button type="primary" class="ele-btn-icon" @click="exportData">
            新建
          </el-button>
          <el-button type="danger" class="ele-btn-icon" @click="exportData">
            删除
          </el-button>
        </template>
        <template #loginType="{ row }">
          <el-tag
            v-if="row.loginType === 0"
            size="small"
            type="success"
            :disable-transitions="true"
          >
            登录成功
          </el-tag>
          <el-tag
            v-else-if="row.loginType === 1"
            size="small"
            type="danger"
            :disable-transitions="true"
          >
            登录失败
          </el-tag>
          <el-tag
            v-else-if="row.loginType === 2"
            size="small"
            type="info"
            :disable-transitions="true"
          >
            退出登录
          </el-tag>
          <el-tag
            v-else-if="row.loginType === 3"
            size="small"
            type="warning"
            :disable-transitions="true"
          >
            刷新TOKEN
          </el-tag>
        </template>
        <template #action="{ row }">
          <el-link type="primary" :underline="false" @click="openEdit(row)">
            修改
          </el-link>
          <el-divider direction="vertical" />
          <ele-dropdown
            :items="[
              { title: '转正', command: 'password' },
              { title: '删除', command: 'delete', danger: true, divided: true },
            ]"
            style="display: inline"
            @command="(key) => dropClick(key, row)"
          >
            <el-link type="primary" :underline="false">
              <span>更多</span>
              <el-icon :size="12" style="vertical-align: -1px; margin-left: 2px">
                <ArrowDown />
              </el-icon>
            </el-link>
          </ele-dropdown>
        </template>
      </ele-pro-table>
    </ele-card>
  </ele-page>
</template>

<script setup>
import { ref, reactive } from "vue";
import { EleMessage } from "ele-admin-plus/es";
import ExcelJS from "exceljs";
import { download } from "@/utils/common";
import { DownloadOutlined } from "@/components/icons";
import LoginRecordSearch from "./components/login-record-search.vue";
import { pageLoginRecords, listLoginRecords } from "@/api/system/login-record";

defineOptions({ name: "SystemLoginRecord" });

/** 默认搜索条件 */
const defaultWhere = reactive({
  username: "",
  nickname: "",
});

/** 表格实例 */
const tableRef = ref(null);

/** 表格列配置 */
const columns = ref([
  {
    type: "selection",
    columnKey: "selection",
    width: 50,
    align: "center",
  },
  {
    type: "index",
    columnKey: "index",
    width: 50,
    align: "center",
  },
  { label: "合同编号", prop: "contractNumber" },
  { label: "合同金额", prop: "contractAmount" },
  { label: "甲方/委托方", prop: "partyA" },
  { label: "乙方/检测方", prop: "partyB" },
  { label: "签订日期", prop: "signDate" },
  { label: "有效期", prop: "validPeriod" },
  { label: "工程名称", prop: "projectName" },
  { label: "工程地址", prop: "projectAddress" },
  { label: "工程编码", prop: "projectCode" },
  { label: "检测范围", prop: "inspectionScope" },
  { label: "备注", prop: "remarks" },
  {
    columnKey: "action",
    label: "操作",
    width: 128,
    align: "center",
    slot: "action",
    hideInPrint: true,
    hideInExport: true,
    fixed: "right",
  },
]);
function generateRecords() {
  const records = [];
  for (let i = 1; i <= 10; i++) {
    const contractNumber = `CN-${String(i).padStart(3, "0")}`;
    const contractAmount = Math.floor(Math.random() * 100000) + 10000;
    const partyA = `Party A ${i}`;
    const partyB = `Party B ${i}`;
    const signDate = new Date(Date.now() - Math.random() * 365 * 24 * 60 * 60 * 1000)
      .toISOString()
      .split("T")[0];
    const validPeriod = `${Math.floor(Math.random() * 5) + 1} year(s)`;
    const projectName = `Project Name ${i}`;
    const projectAddress = `Project Address ${i}`;
    const projectCode = `Project Code ${i}`;
    const inspectionScope = `Inspection Scope ${i}`;
    const remarks = `Remarks ${i}`;

    records.push({
      contractNumber: contractNumber,
      contractAmount: contractAmount,
      partyA: partyA,
      partyB: partyB,
      signDate: signDate,
      validPeriod: validPeriod,
      projectName: projectName,
      projectAddress: projectAddress,
      projectCode: projectCode,
      inspectionScope: inspectionScope,
      remarks: remarks,
    });
  }

  return records;
}

/** 表格数据源 */
const datasource = ({ pages, where, orders, filters }) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const records = generateRecords();
      resolve({
        list: records,
        count: 100,
      });
    });
  });
};

/** 刷新表格 */
const reload = (where) => {
  tableRef.value?.reload?.({ page: 1, where });
};

/** 导出数据 */
const exportData = () => {
  // 请求查询全部接口
  const loading = EleMessage.loading({
    message: "请求中..",
    plain: true,
  });
  tableRef.value?.fetch?.(({ where, orders, filters }) => {
    listLoginRecords({ ...where, ...orders, ...filters })
      .then((data) => {
        const workbook = new ExcelJS.Workbook();
        const sheet = workbook.addWorksheet("Sheet1");
        sheet.addRow([
          "账号",
          "用户名",
          "IP地址",
          "设备型号",
          "操作系统",
          "浏览器",
          "操作类型",
          "备注",
          "登录时间",
        ]);
        data.forEach((d) => {
          sheet.addRow([
            d.username,
            d.nickname,
            d.ip,
            d.device,
            d.os,
            d.browser,
            ["登录成功", "登录失败", "退出登录", "刷新TOKEN"][d.loginType],
            d.comments,
            d.createTime,
          ]);
        });
        // 设置列宽
        [16, 16, 22, 22, 18, 20, 14, 16, 24].forEach((width, index) => {
          sheet.getColumn(index + 1).width = width;
        });
        // 设置样式
        sheet.eachRow({ includeEmpty: true }, (row, rowIndex) => {
          row.height = 20;
          row.eachCell({ includeEmpty: true }, (cell) => {
            cell.border = {
              top: { style: "thin" },
              left: { style: "thin" },
              bottom: { style: "thin" },
              right: { style: "thin" },
            };
            cell.alignment = {
              vertical: "middle",
              horizontal: "center",
            };
            cell.font = { size: 12, bold: rowIndex === 1 };
          });
        });
        // 下载文件
        workbook.xlsx.writeBuffer().then((data) => {
          download(data, "登录日志.xlsx");
          loading.close();
        });
      })
      .catch((e) => {
        loading.close();
        EleMessage.error(e.message);
      });
  });
};
</script>
